<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix" >
      <span style="padding-right: 20px;">个人信息</span>
      <el-button 
            icon="el-icon-edit"
            size="small"
            type="primary"
            circle
            plain
            @click="handleEdit()"
            v-if="hasPermission('sys:user:add')"
            ></el-button
          >
    </div>

    <div class="user-profile" >
      <!-- <div class="box-center">
        <pan-thumb :image="user1.avatar" :height="'150px'" :width="'150px'" :hoverable="false">
          <div>Hello</div>
          {{ user1.role }}
        </pan-thumb>
      </div> -->
      <!-- <div class="user1.avatar">
                <el-avatar
                  :size="100"
                  :src="user1.avatar"
                  align="center"
                ></el-avatar>
              </div>
      <div> -->
        <el-col :span="4" >
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img" style="height:125px">
                <el-avatar
                  :size="100"
                  :src="user.avatar"
                  align="center"
                ></el-avatar>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="10">
        <el-form ref="user1" :model="user1" label-width="80px" disabled>
        <el-form-item label="姓名:">
          <el-input v-model="user1.nickName"></el-input>
        </el-form-item>
        
        </el-form>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">姓名：{{ user1.phone }}</div>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">电话：{{ user1.phone }}</div>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">用户名：{{ user1.phone }}</div>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">密码：{{ user1.phone }}</div>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">昵称：{{ user1.phone }}</div>
        <div style="font-size:15px;font-family:'Microsoft YaHei'">性别：{{ user1.phone }}</div>
      </el-col>
      <el-col :span="10">
        <el-form ref="user1" :model="user1" label-width="80px">
        <el-form-item label="电话:">
          <el-input v-model="user1.phone"></el-input>
        </el-form-item>
        </el-form>
      </el-col> -->
      <el-col :span="20">
      <el-descriptions column="2" :size="large" >
    <el-descriptions-item label="姓名" >{{ user1.realName }}</el-descriptions-item>
    <el-descriptions-item label="电话">{{ user1.phone }}</el-descriptions-item>
    <el-descriptions-item label="用户名">{{ user1.username }}</el-descriptions-item>
    <!-- <el-descriptions-item label="密码">{{ user1.password }}</el-descriptions-item> -->
    <el-descriptions-item label="昵称">{{ user1.nickName }}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{ user1.email }}</el-descriptions-item>
    <el-descriptions-item label="性别" v-if="user1.gender === 0" >男</el-descriptions-item>
    <el-descriptions-item label="性别" v-if="user1.gender === 1" >女</el-descriptions-item>
</el-descriptions>
</el-col>
     
      </div>
      <!-- 添加和编辑用户窗口 -->
    <system-dialog
        :title="userDialog.title"
        :height="userDialog.height"
        :width="userDialog.width"
        :visible="userDialog.visible"
        @onClose="onClose"
        @onConfirm="onConfirm"
      >
        <div slot="content">
          <el-form
            :model="user1"
            ref="user1"
            label-width="80px"
            :inline="true"
            size="small"
          >
          <el-form-item prop="realName" label="姓名">
              <el-input v-model="user1.realName"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="电话">
              <el-input v-model="user1.phone"></el-input>
            </el-form-item>
            <el-form-item prop="username" label="用户名">
              <el-input v-model="user1.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input type="password" v-model="user1.password"></el-input>
            </el-form-item>
            
            <el-form-item label="昵称">
              <el-input v-model="user1.nickName"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="user1.email"></el-input>
            </el-form-item>
            <el-form-item prop="gender" label="性别">
              <el-radio-group v-model="user1.gender">
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <br />
            <!-- 用户头像：待补充 -->
          </el-form>
        </div>
      </system-dialog>
    

    
    <!-- <div class="user1-bio">
      <div class="user1-education user1-bio-section">
        <div class="user1-bio-section-header"><svg-icon icon-class="education" /><span>学历</span></div>
        <div class="user1-bio-section-body">
          <div class="text-muted">
            JS in Computer Science from the University of Technology
          </div>
        </div>
      </div>

      <div class="user1-skills user1-bio-section">
        <div class="user1-bio-section-header"><svg-icon icon-class="skill" /><span>技能</span></div>
        <div class="user1-bio-section-body">
          <div class="progress-item">
            <span>Vue</span>
            <el-progress :percentage="70" />
          </div>
          <div class="progress-item">
            <span>JavaScript</span>
            <el-progress :percentage="18" />
          </div>
          <div class="progress-item">
            <span>Css</span>
            <el-progress :percentage="12" />
          </div>
          <div class="progress-item">
            <span>ESLint</span>
            <el-progress :percentage="100" status="success" />
          </div>
        </div>
      </div>
    </div> -->
  </el-card>
  
</template>

<script>
import PanThumb from '@/components/PanThumb';
//导入用户user.ji脚本文件
import userApi from "@/api/user";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";

export default {
  name: "userList",
  components: { PanThumb,SystemDialog },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: '',
          avatar: '',
          role: ''
        }
      }
    }
  },
  data(){
    return{
      userId:'',
      user1:{
        id: "",
        departmentId: "",
        departmentName: "",
        email: "",
        realName: "",
        phone: "",
        nickName: "",
        password: "",
        username: "",
        gender: "",
        avatar: "",
        leve:"",
        orgId:"",//组织机构id
      },
      userList: [], //用户列表
      //控制查看时不可更改数据
      isInput: false,

      //添加和修改用户窗口属性
      userDialog: { title: "", height: 200, width: 610, visible: false },

    }
  },
  mounted(){
    this.search();
  },
  methods:{
    //查询报表模板 
    async search() {
      let res = await userApi.getList({id:this.userId});
      //判断是否成功
      if (res.success) {
        console.log(res.data);
        console.log(11111);
        //赋值
        this.user1 = res.data.records[0];
        console.log(this.userList);
      }
    },
    //打开编辑窗口
    handleEdit() {
      this.userDialog.visible = true; //显示窗口
      this.userDialog.title = "编辑个人信息"; //设置标题
      //把当前编辑的数据复制到表单数据域，供回显使用
      // this.$objCopy("user1", this.user1);
    },
     // 编辑取消事件
     onClose() {
      this.userDialog.visible = false; //关闭窗口
    },
    // 编辑确认事件
    onConfirm() {
      this.$refs.user1.validate(async (valid) => {
        if (valid) {
          let res = null;
            //发送修改请求
            res = await userApi.update(this.user1);
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search();
            //关闭窗口
            this.userDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },
  created(){
    this.$data.userId = sessionStorage.getItem("userId");
  },

  

}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user1-profile {
  .user1-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user1-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user1-follow {
    padding-top: 20px;
  }
}

.user1-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user1-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user1-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}


</style>
